<template>
  <div class="login">
    <van-nav-bar title="密码登录" left-arrow @click-left="$router.back()" />
    <!-- 表单输入框 -->
    <van-cell-group>
      <van-row>
        <van-col span="24">
          <input
            v-model.trim="user.username"
            type="text"
            placeholder="请输入账号"
          />
        </van-col>
      </van-row>
      <van-row>
        <van-col span="20">
          <input
            v-model.trim="user.password"
            :type="checked ? 'text' : 'password'"
            placeholder="请输入密码"
          />
        </van-col>
        <van-col span="4">
          <van-switch v-model="checked" size="20px" />
        </van-col>
      </van-row>
      <van-row>
        <van-col span="12">
          <input
            v-model.trim="user.captcha_code"
            type="text"
            placeholder="验证码"
            @input="lengthFn"
          />
        </van-col>
        <van-col span="6">
          <img :src="baseCode" class="img" />
        </van-col>
        <van-col span="6" class="catches" @click="catchesNext">
          <span>看不清</span>
          <a>换一张</a>
        </van-col>
      </van-row>
    </van-cell-group>
    <!-- 提示 -->
    <p>
      温馨提示：未注册过的账号，登录时将自动注册 注册过的用户可凭账号密码登录
    </p>
    <!-- 按钮 -->
    <van-button round type="primary" block @click="loginFn">登录</van-button>
    <div class="reset">
      <a>重置密码?</a>
    </div>
  </div>
</template>

<script>
import { captchas, login } from "@/api/user.js";
export default {
  data() {
    return {
      checked: false,
      user: {
        captcha_code: "",
        username: "15333333336",
        password: "123",
      },
      baseCode: "",
    };
  },
  created() {
    this.getCatche();
  },
  methods: {
    catchesNext() {
      this.getCatche();
    },
    // 获取验证码
    getCatche() {
      captchas().then((res) => {
        console.log(54, res);
        this.baseCode = res.data.code;
      });
    },
    // 登录
    loginFn() {
      let phoneReg = /^1[3|4|5|6|7|8|9]\d{9}$/;
      let pwRge = /^.{3,10}$/;
      if (
        !phoneReg.test(this.user.username) ||
        !pwRge.test(this.user.password)
      ) {
        this.$toast.fail("内容格式不正确");
        return;
      }
      login(this.user).then((res) => {
        console.log(91, res);
        // 跳转页面
        this.$router.push("/home");
      });
    },
    // 验证码框长度输入设置
    lengthFn() {
      if (this.user.captcha_code.length > 4) {
        this.user.captcha_code = this.user.captcha_code.slice(0, 4);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  background-color: #f5f5f5;
  height: 100vh;
  input {
    width: 90%;
    height: 35px;
    padding-left: 20px;
    border: none;
  }
  p {
    padding: 0 10px;
    line-height: 28px;
    font-size: 14px;
    color: red;
  }
  .reset {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    a {
      color: #3190e8;
      font-size: 14px;
      padding: 10px;
      margin-right: 10px;
    }
  }
  .catches {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    a {
      font-size: 12px;
      height: 25px;
      color: #3190e8;
      line-height: 20px;
    }
    span {
      height: 25px;
      line-height: 30px;
    }
  }
  .img {
    vertical-align: middle;
  }
}
/deep/.van-nav-bar {
  background-color: #3190e8;
  font-size: 18px;
  .van-nav-bar__title,
  .van-icon {
    color: #fff;
    font-size: 18px;
  }
}
/deep/.van-row {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #eee;
}
.van-button {
  width: 90%;
  margin: 0 auto;
  font-size: 18px;
}
.van-switch {
  vertical-align: middle;
}
</style>